<template>
    <div id="cart-container">
      <el-table
        :data="cart"
        style="width: 100%"
        border
      >
        <!-- <el-table-column
          prop="orderNumber"
          label="订单号"
          width="180">
        </el-table-column> -->
        <el-table-column
          label="商品图片"
          width="300px">
          <template v-slot="scope">
            <el-image
              style="width: 140px; height: 100px; border-radius: 0%"
              :src="'http://47.99.51.143:9000/files/' + scope.row.game_image"
              :preview-src-list="['http://47.99.51.143:9000/files/' + scope.row.game_image]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="game_name"
          label="商品名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="120">
        </el-table-column>
       <!--  <el-table-column
          label="数量" prop="quantity" width="300px">
          <template slot-scope="scope">
            <el-input-number size="small" v-model="scope.row.quantity" min="1"></el-input-number>
          </template>
        </el-table-column> -->
        <el-table-column
          label="操作">
          <template v-slot="scope">
            <el-button @click="changeShopCarId(scope.row.id)" type="danger" size="small">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <div class="total-price" style="margin-top: 20px; text-align: right;">
        <span>总价格: </span>
        <el-tag type="success" style="font-size: 30px;">¥{{ totalPrice }}</el-tag>
      </div>
  
      <el-button type="primary" @click="clearCart()" style="margin-top: 20px;">清空购物车</el-button>
      <el-button type="primary" @click="showPaymentDialog = true" style=" margin-left: 50px;">去支付</el-button>






      <!-- 支付表单 -->
      <el-dialog title="支付" :visible.sync="showPaymentDialog" width="30%">
        <div>
          <p>账户余额：￥{{ user.money }}</p>
          <p>需要支付：￥{{ totalPrice }}</p>
          
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="success" v-if="user.money >= totalPrice" @click="toPay(user.id), joinshopCar()">确认支付</el-button>
          <p v-else>余额不足，请<a href="/recharge">前往充值</a></p>
          <p  v-if="paymentStatus === 'success'" >购买完成！</p>
          <el-button type="danger" @click="showPaymentDialog = false">取消</el-button>
        </span>
      </el-dialog>







    </div>
  </template>
  
  






<script>

import request from '@/request/request.js';
export default {
  data() {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      game: localStorage.getItem("game") ? JSON.parse(localStorage.getItem("game")) : {},
      cart: [],
      Games: [],
      showPaymentDialog: false,
      paymentStatus: ''
    }
  },


  methods: {
    changeIsPurchased() {
      request.get("/games/change/purchased").then((res) => {
        if (res.code === "0") {
          this.$message.success({ message: "已加入游戏库", type: "success" });

        }
      });
    },
    toPay(id) {
      const money = this.user.money - this.totalPrice;
      request.put(`/user/${id}/pay?money=${money}`).then((res) => {
        if (res.code === "0") {
          this.paymentStatus = 'success';
          this.showPaymentDialog = false;
          this.changeIsPurchased();
          this.clearCart();
          this.$message.success({ message: "支付成功", type: "success" });
        } else {
          this.$message({ message: "支付失败", type: "error" });
        }
      });
    },
    topayboss(id) {
      request.get("/user/" + id).then((res) => {
        if (res.code === "0") {
          this.usermoney = this.user.money;
        }
      });
      const money = parseInt(this.usermoney) + parseInt(this.game.price);
      request.put(`/user/${id}/pay?money=${money}`).then((res) => {
        if (res.code === "0") {
          this.$message.success({ message: "支付成功", type: "success" });
        } else {
          this.$message({ message: "支付失败", type: "error" });
        }
      });

    },
    joinshopCar() {
      for (let i = 0; i < this.cart.length; i++) {
        this.Games = this.cart[i];
        this.Games.is_purchased = 1;
        this.Games.userId = this.user.id;
        this.Games.gameId = this.cart[i].id;
        request.post("/shop/add", this.Games).then((res) => {
          if (res.code === "0") {
            this.topayboss(this.game.busId)
            this.changeIsPurchased(this.game.id);
          }
        });
      }
    },

    load() {
      request.get("games/cart").then(res => {
        if (res.code === "0") {
          this.cart = res.data;
        } else {
          this.$message.error('获取购物车失败');
        }
      });
    },
    changeShopCarId(id) {
      request.get("/games/change/cart/" + id).then((res) => {
        if (res.code === "0") {
          this.$message.success({ message: "已移除该商品", type: "success" });
          this.load();
        } else {
          this.$message({ message: "移除商品失败", type: "error" });
        }
      });
    },
    clearCart() {
      request.get("/games/clear/cart").then((res) => {
        if (res.code === "0") {
          this.$message.success({ message: "购物车已清空", type: "success" });
          this.load();
        } else {
          this.$message({ message: "清空购物车失败", type: "error" });
        }
      });
    },




  },

  computed: {
    totalPrice() {
      return this.cart.reduce((total, item) => {
        return total + Number(item.price);
      }, 0);
    }
  },
  created() {
    this.load();


  },




}
</script>








<style scoped>
/* 上述 CSS 代码 */
.cart-container {
  width: 300px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 20px;
  margin-top: 20px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cart-container li {
  list-style: none;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dotted #ccc;
}

.cart-container button {
  padding: 5px 10px;
  background-color: #5cb85c;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.cart-container button:hover {
  background-color: #4cae4c;
}
</style>
























